<template>
  <div class="recommend">
    <div class="recommend-box" >
      <p class="title">{{ typeObj[type]}}</p>
    <ul class="recommend-content">
      <van-loading class="loading" type="spinner" color="#1989fa" v-if="isShow"></van-loading>
      <li class="recommend-li" v-for="book in bookname" :key="book.name" :style="{color:book.color}">
        {{ book.name }}
      </li>
    </ul>
    <van-loading class="loading" type="spinner" color="red" v-if="isShow"></van-loading>
    </div>
  </div>
</template>
<script>
import store from "../store/index"
export default {
  name: "Recommend",
    computed:{
      isShow:function(){
        return this.$store.state.isLoading
      }
    },
  props: {
    type: String,
  },
  data() {
    return {
      typeObj:{
        tuijian:"多抓鱼味的推荐",
        shujia:"孩子的书架",
        jiaocai:"教材教辅",
        shoufa:"杂志收发室"
      },
      bookname: [],
    };
  },
  created() {

    store.commit("mChangeIsLoading",true);
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/bookname?type="+this.type, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        this.bookname = JSON.parse(xhr.responseText);
        console.log(this.bookname);
      }
    };
    xhr.send();

    store.commit("mChangeIsLoading",false);
  },
};
</script>
<style>
.title {
  color: black;
  height: 0.5rem;
  line-height: 0.5rem;
  font-weight: 700;
  font-size: 20px;
  padding-left: 0.1rem;
}
.recommend-content {
  margin: 0 .1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 2rem;
  border-bottom: .01rem solid #777;
}
.recommend-content .recommend-li {
  height: 0.4rem;
  line-height: .4rem;
}
</style>